import React, { useState } from'react';
import {
    StyleSheet,
    Text,
    View,
    FlatList,
    TextInput,
    TouchableOpacity,
    SafeAreaView,
    Alert
} from'react-native';

// 定义数据项的类型
interface DataItem {
    id: number;
    name: string;
    type: string;
    createdAt: string;
}

// 模拟数据
const initialData: DataItem[] = [
    { id: 1, name: '数据 1', type: '类型 A', createdAt: '2025-04-22' },
    { id: 2, name: '数据 2', type: '类型 B', createdAt: '2025-04-21' },
    { id: 3, name: '数据 3', type: '类型 A', createdAt: '2025-04-20' }
];

const DataManagementPage = () => {
    const [data, setData] = useState<DataItem[]>(initialData);
    const [searchQuery, setSearchQuery] = useState<string>('');
    const [selectedType, setSelectedType] = useState<string>('全部');

    const filteredData = data.filter((item: DataItem) => {
        const nameMatch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
        const typeMatch = selectedType === '全部' || item.type === selectedType;
        return nameMatch && typeMatch;
    });

    const handleDelete = (id: number) => {
        Alert.alert(
            '确认删除',
            '你确定要删除这条数据吗？',
            [
                {
                    text: '取消',
                    style: 'cancel'
                },
                {
                    text: '删除',
                    onPress: () => {
                        setData(data.filter((item: DataItem) => item.id!== id));
                    }
                }
            ]
        );
    };

    const handleAdd = () => {
        const newId = data.length > 0? data[data.length - 1].id + 1 : 1;
        const newData: DataItem = {
            id: newId,
            name: `新数据 ${newId}`,
            type: '类型 A',
            createdAt: new Date().toISOString().split('T')[0]
        };
        setData([...data, newData]);
    };

    const renderItem = ({ item }: { item: DataItem }) => (
        <View style={styles.dataItem}>
            <Text style={styles.itemText}>{item.name}</Text>
            <Text style={styles.itemText}>{item.type}</Text>
            <Text style={styles.itemText}>{item.createdAt}</Text>
            <TouchableOpacity onPress={() => handleDelete(item.id)}>
                <Text style={styles.deleteText}>删除</Text>
            </TouchableOpacity>
        </View>
    );

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.title}>数据管理</Text>
                <TouchableOpacity onPress={handleAdd}>
                    <Text style={styles.addText}>添加</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.searchAndFilter}>
                <TextInput
                    style={styles.searchInput}
                    placeholder="搜索数据"
                    value={searchQuery}
                    onChangeText={(text: string) => setSearchQuery(text)}
                />
                <TouchableOpacity
                    style={styles.filterButton}
                    onPress={() => {
                        Alert.alert(
                            '筛选数据',
                            '选择数据类型',
                            [
                                { text: '全部', onPress: () => setSelectedType('全部') },
                                { text: '类型 A', onPress: () => setSelectedType('类型 A') },
                                { text: '类型 B', onPress: () => setSelectedType('类型 B') }
                            ]
                        );
                    }}
                >
                    <Text style={styles.filterText}>筛选: {selectedType}</Text>
                </TouchableOpacity>
            </View>
            <FlatList
                data={filteredData}
                renderItem={renderItem}
                keyExtractor={(item: DataItem) => item.id.toString()}
                style={styles.dataList}
            />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc'
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold'
    },
    addText: {
        color: 'blue'
    },
    searchAndFilter: {
        flexDirection: 'row',
        padding: 16,
        alignItems: 'center'
    },
    searchInput: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 8,
        marginRight: 16
    },
    filterButton: {
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 8
    },
    filterText: {
        color: 'blue'
    },
    dataList: {
        flex: 1
    },
    dataItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    },
    itemText: {
        flex: 1
    },
    deleteText: {
        color: 'red'
    }
});

export default DataManagementPage;    